
<!DOCTYPE>  

<html>  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<title>HTML5d打砖块</title>  

<!-- 要记得引用jquery-1.4.2.js -->

<script type="text/javascript" src="file:///D|/html5keshe/js/1.js></script>  

<script type="text/javascript" >  

    //全局变量   

    var backgroundImg = new Image();//背景图   
 
    var boardImg = new Image();//木板

	var ballImg = new Image();//打砖块的球

    var ctx;//2d画布   

    var screenWidth;//画布宽度   

    var screenHeight;//画布高度 

	var speed = 2;//不变常量,从新开始的速度  

    var horizontalSpeed = speed;//水平速度,随着球的碰撞会发生改变

	var verticalSpeed = -speed;	//垂直速度,开始肯定是要向上飘，所以要负数，随着球的碰撞会发生改变

	var ballAngle = 2;//球旋转的速度

	var brickImg = new Image();//砖块

	var gameRunning = false;//游戏运行状态

	var gameloopId;//记住循环的变量

	var lives=3;//3条生命数

	var livesImages = new Array();//生命图片数组

	var score = 0;//分数

	var scoreImg = new Image();//分数板

    //公用 定义一个游戏物体戏对象   

    function GameObject()   

    {   

        this.x = 0;   

        this.y = 0;   

        this.image = null;   

    }   

       

    //定义木板board 继承游戏对象GameObject   

    function Board() {};   

    Board.prototype = new GameObject();//游戏对象GameObject   

    //木板实例   

    var board = new Board();        //循环描绘物体  

	 

	//定义球 继承 游戏对象GameObject

	function Ball() {};

	Ball.prototype = new GameObject();//游戏对象GameObject

	Ball.prototype.angle = 0;//球的角度，目前中（即作为球在屏幕上旋转退回）

	//定义球实例 

	var ball = new Ball();

	

	//定义奖品数组Prizes和对象Prize，继承游戏对象GameObject

	var prizes = new Array();

	function Prize() {};

	Prize.prototype = new GameObject();//继承游戏对象GameObject

	Prize.prototype.row = 0;//奖品行位置

	Prize.prototype.col = 0;//奖品列位置

	Prize.prototype.hit = false;//是否被撞过

	Prize.prototype.point = 0;//分数

	

    function GameLoop()   

    {   

        //清除屏幕   

        ctx.clearRect(0, 0, screenWidth, screenHeight);   

        ctx.save();   

        //绘制背景   

        ctx.drawImage(backgroundImg, 0, 0);   

        //绘制木板   

        ctx.drawImage(board.image, board.x, board.y); 

		//绘制奖品

		DrawPrizes();

		//绘制生命条

		DrawLives();

		//绘制分数板

		DrawScore();		

		//绘制球

		//改变移动球X和Y位置

		ball.x += horizontalSpeed;

		ball.y += verticalSpeed;

		//改变翻滚角度

		ball.angle += bearAngle;

		//以当前球的中心位置为基准

   	    ctx.translate(ball.x + (ball.image.width/2), ball.y + (ball.image.height/2));

		//根据当前球的角度轮换

    	ctx.rotate(ball.angle * Math.PI/180);

		//描绘球

	  	ctx.drawImage(ball.image, - (ball.image.width/2), - (ball.image.height/2));



        ctx.restore();

		//检测是否碰到边界

		HasBallHitEdge();

		//检测球碰撞木板

		HasBallHitBoard();

		//检测球碰撞砖块

		HasBallHitPrize();

        }   

    //加载图片   

    function LoadImages()   

    {   

        boardImg.src = "file:///D|/html5keshe/src/board.png";//木板  

        backgroundImg.src ="file:///D|/html5keshe/src/background.jpg";//背景图  

		bearEyesClosedImg.src = "file:///D|/html5keshe/src/ball.png";//球

		flowerImg.src = "images/flower.png";//奖品花

		acornImg.src = "images/acorn.png";//奖品橡子

		leafImg.src = "images/leaf.png";//奖品叶子

		scoreImg.src = "images/score.png";//分数板

		//生命图片因为只有6个，所以最多只能6个

		for(var x=0; x<6; x++)

		{

			livesImages[x] = new Image();	

			livesImages[x].src = "images/lives" + x + ".png";

		}

		

		board.image = boardImg;   

		ball.image = ballImg;

		backgroundImg.onload = function(){GameLoop(); };

    } 

	//球碰撞边界

	function HasBalllHitEdge()

	{

		//球&nbsp;碰到右边边界

		if(ball.x>screenWidth - ball.image.width)

		{

			if(horizontalSpeed > 0)//假如向右移动

				horizontalSpeed =-horizontalSpeed;//改变水平速度方向

		}

		//球碰到左边边界

		if(ball.x<-10)

		{

			if(horizontalSpeed < 0)//假如向左移动

				horizontalSpeed = -horizontalSpeed;//改变水平速度方向

		}

		//球碰到下面边界

		if(ball.y>screenHeight -ball.image.height)

		{

			lives -=1;//生命减1

			if(lives>0)

			{

				horizontalSpeed = speed;

				verticalSpeed = -speed;

				ball.x = parseInt(screenWidth/2);

				ball.y = parseInt(screenHeight/2);

				$("#BtnImgStart").show();

				ToggleGameplay();

				GameLoop();

			}

		}

		//球碰到上边边界

		if(ball.y<0)

		{

			verticalSpeed = -verticalSpeed;

		}

		if(lives<=0)

			GameOver();

	}

	//事件处理   

	function AddEventHandlers()   

	{   

		//鼠标移动则木板跟着移动   

		$("#container").mousemove(function(e){   

			board.x = e.pageX - (board.image.width/2);   

		}); 

		//开始按钮   

		$("#BtnImgStart").click(function (){		

			ToggleGameplay();

		});

	} 

	//检测2个物体是否碰撞

	function CheckIntersect(object1, object2, overlap)

	{

		//    x-轴                      x-轴

		//  A1------>B1 C1              A2------>B2 C2

		//  +--------+   ^              +--------+   ^

		//  | object1|   | y-轴         | object2|   | y-轴

		//  |        |   |              |        |   |

		//  +--------+  D1              +--------+  D2

		//

	 	//overlap是重叠的区域值

		A1 = object1.x + overlap;

		B1 = object1.x + object1.image.width - overlap;

		C1 = object1.y + overlap;

		D1 = object1.y + object1.image.height - overlap;

	 

		A2 = object2.x + overlap;

		B2 = object2.x + object2.image.width - overlap;

		C2 = object2.y + overlap;

		D2 = object2.y + object2.image.width - overlap;

	 

		//假如他们在x-轴重叠

		if(A1 > A2 && A1 < B2

		   || B1 > A2 && B1 < B2)

		{

			//判断y-轴重叠

			if(C1 > C2 && C1 < D1

		   || D1 > C2 && D1 < D2)

			{

				//碰撞

				return true;

			}

	 

		}

		return false;

	}

	//球碰木板

	function HasBallHitBoard()

	{

		//假如碰撞

		if(CheckIntersect(ball, board, 5))

		{

			//假如碰撞的位置属于木板的左下位置

			if((bll.x + ball.image.width/2) < (board.x + board.image.width*0.25))

			{

				horizontalSpeed = -speed;//反弹

			}

			//假如碰撞的位置属于木板的左上位置

			else if((ball.x + ball.image.width/2) < (board.x + board.image.width*0.5))

			{

				//反弹速度减半

				horizontalSpeed = -speed/2;

			}

			//假如碰撞的位置属于木板的右上位置

			else if((ball.x + ball.image.width/2) < (board.x + board.image.width*0.75))

			{

				horizontalSpeed = speed/2;

			}

			else

			{

				horizontalSpeed = speed;

			}

			verticalSpeed = -speed;//改变垂直速度。也即动物向上移动

	 

		}

	}

	//创建奖品数组

	function InitPrizes()

	{

		var count=0;

		//一共3行

		for(var x=0; x<3; x++)

		{

			//一共23列

			for(var y=0; y<23; y++)

			{

				prize = new Prize();

				if(x==0)

				{

					prize.image = flowerImg;//鲜花放在第一行

					prize.point = 3;//3分

				}

				if(x==1)

				{

					prize.image = acornImg;//豫子刚在第2行

					prize.point = 2;//2分

				}

				if(x==2)

				{

					prize.image = leafImg;//叶子放在第3行

					prize.point = 1;//1分

				}

					

				prize.row = x;

				prize.col = y;

				prize.x = 20 * prize.col + 10;//x轴位置

				prize.y = 20 * prize.row + 40;//y轴位置

				//装入奖品数组，用来描绘

				prizes[count] = prize;

				count++;

			}

		}

	}

	//绘制奖品，把奖品显示在画布上

	function DrawPrizes()

	{

		for(var x=0; x<prizes.length; x++)

		{

			currentPrize = prizes[x];			

			//假如没有被撞击，则描绘

			if(!currentPrize.hit)

			{

				ctx.drawImage(currentPrize.image, prizes[x].x, prizes[x].y);

			}

		}

		if(AllPrizesHit())

		{

			GameOver();

		}

	}

	

	//撞到奖品

	function HasAnimalHitPrize()

	{

		//取出所有奖品

		for(var x=0; x<prizes.length; x++)

		{

			var prize = prizes[x];

	 		//假如没有碰撞过

			if(!prize.hit)

			{

				//判断碰撞

				if(CheckIntersect(prize, animal, 0))

				{

					prize.hit = true;

					//熊反弹下沉

					verticalSpeed = speed;

					//得分

					score += prize.point;

				}

			}

		}



	}

	//判断是否撞完奖品，假如其中有一个

	function AllPrizesHit()

	{

		for(var c=0; c<prizes.length; c++)

		{

			checkPrize = prizes[c];

			if(checkPrize.hit == false)

				return false;

				

		}

		return true;

	}

	//开始或者暂停游戏

	function ToggleGameplay()

	{

		gameRunning = !gameRunning;

		if(gameRunning)

		{

			$("#BtnImgStart").hide();

		     gameloopId = setInterval(GameLoop, 10); 

		}else

		{

			clearInterval(gameloopId);

		}

	}

	//结束游戏

	function GameOver()

	{

		gameRunning = false;

		clearInterval(gameloopId);

		alert("游戏结束!");

	}

	//描绘生命条

	function DrawLives()

	{

		ctx.drawImage(livesImages[lives], 0, 0);

	}

	//描绘分数

	function DrawScore()

	{

		ctx.drawImage(scoreImg, screenWidth-(scoreImg.width),0);

		ctx.font = "12pt Arial";

		ctx.fillText("" + score, 425, 25);  

	}

    //初始化   

    $(window).ready(function(){    

		AddEventHandlers();//添加事件  

        LoadImages();           

        ctx = document.getElementById('canvas').getContext('2d'); //获取2d画布      

        screenWidth = parseInt($("#canvas").attr("width")); //画布宽度 

        screenHeight = parseInt($("#canvas").attr("height"));   

		//初始化木板

        board.x = parseInt(screenWidth/2);///木板X坐标  

        board.y = screenHeight - 40;//木板Y坐标   

		//初始化球

		ball.x = parseInt(screenWidth/2);

		ball.y = parseInt(screenHeight/2); 

		//初始化奖品

		InitPrizes();

        

    });   

 

  

</script>  

</head>  

  

<body>  

    <div id="container" style="border:1px solid; cursor:"file:///D|/html5keshe/src/board.png"; width:480px; height:320px;"><img src="../src/start1.png" width="93" height="38" align="baseline" id="BtnImgStart" style="position: absolute; left: 200px; top: 200px; /* [disabled]cursor: pointer; */ float: left; display: block; width: 115px; height: 55px;"><img src="../src/background.jpg" width="480" height="320"></div>
<div  class="Copyrights"> 

  
<script src="http://s15.cnzz.com/stat.php?id=2297124&amp;web_id=2297124" language="JavaScript"></script></div>

</body>  

</html>  

